<template>
  <view class="my">
    <view class="header">
      <button class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
        <image :src="userInfo.avatar || morenimg" mode="widthFix" />
      </button>
      <text class="name">{{ userInfo.name || "点击头像登录" }}</text>
    </view>

    <view class="list">
      <view
        class="li"
        v-for="(item, index) in list"
        :key="index"
        @click="jump(item.url)"
      >
        <view>
          <image :src="item.icon" mode="widthFix"></image>
          <text>{{ item.name }}</text>
        </view>
        <image
          src="../../static/img/right.png"
          mode="widthFix"
          class="right_cc"
        ></image>
      </view>
    </view>
    <loading v-if="loadingflag"></loading>
    <Prompt v-model="authSwitch"></Prompt>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "最近浏览",
          icon: require("../../static/img/clock_l.png"),
          url: "/pages/viewedPage/viewedPage",
        },
        {
          name: "我的收藏",
          icon: require("../../static/img/aixin_k.png"),
          url: "/pages/myFavorite/myFavorite",
        },
        {
          name: "评论管理",
          icon: require("../../static/img/pinglunk.png"),
          url: "/pages/review/review",
        },
      ],
      userInfo: {},
      morenimg: "https://static.77du.net/template/ciff/img/moren.png",
      code: "",
      loginCode: true,
    };
  },
  onShow() {
    this.setTabBarIndex(2);
    this.userInfo = uni.getStorageSync("userInfo") || {};
  },
  methods: {
    jump(url) {
      console.log(url);
      if (!this.AuthState(true)) return;
      uni.navigateTo({
        url,
      });
    },
    login() {
      return new Promise((reslove, reject) => {
        uni.login({
          success: (res) => {
            reslove(res);
          },
        });
      });
    },
    async openAuth() {
      let { code } = await this.login();
      uni.getUserInfo({
        success: (res) => {
          console.log(res);
          if (res.errMsg == "getUserInfo:ok") {
            try {
              const { signature, encryptedData, iv, userInfo } = res;
              this.$http(
                {
                  url: "/passport/user/ciff/login/weixin",
                  method: "POST",
                  urlType: true,
                },
                {
                  code,
                  signature,
                  userEncryptedData: encryptedData,
                  iv,
                },
                true
              ).then((rs) => {
                if (rs[1].data.code === "000000") {
                  console.log(rs[1].data.data);
                  this.userInfo = rs[1].data.data;
                  uni.setStorageSync("userInfo", rs[1].data.data);
                  uni.showToast({
                    title: "登录成功",
                    icon: "none",
                    duration: 1000,
                  });
                }
              });
            } catch (error) {}
          }
        },
        fail: (res) => {
          uni.showToast({
            title: "未授权用户信息",
            icon: "none",
            duration: 1000,
          });
        },
      });
    },
    getUserInfo(e) {
      // if (uni.getStorageSync('userInfo')) return //已经有登录过
      this.openAuth();
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
}

.header {
  width: 750rpx;
  position: relative;
  padding-bottom: 193rpx;
  background: linear-gradient(
    90deg,
    rgba(179, 30, 35, 1) 0%,
    rgba(255, 0, 0, 1) 100%
  );
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  .btn {
    // width: 154rpx;
    // height: 154rpx;
    > image {
      width: 154rpx;
      max-height: 154rpx;
      margin-top: 118rpx;
      border-radius: 50%;
    }
  }

  > .name {
    height: 37rpx;
    font-size: 38rpx;
    font-family: FZLanTingHei-H-GBK;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 76rpx;
    margin-top: 33rpx;
  }
}

.list {
  width: 750rpx;
  height: calc(100vh - 535rpx);
  background: rgba(255, 255, 255, 1);
  border-radius: 60rpx 60rpx 0px 0px;
  position: absolute;
  z-index: 10;
  top: 415rpx;
  overflow: hidden;

  > .li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-top: 86rpx;
    padding-left: 54rpx;
    padding-right: 75rpx;

    > image {
      vertical-align: middle;
    }

    .right_cc {
      width: 20rpx;
    }

    > view {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(36, 36, 36, 1);
      display: flex;
      justify-content: flex-start;
      align-self: center;

      > image {
        width: 38rpx;
        flex-shrink: 0;
      }

      > text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(36, 36, 36, 1);
        margin-left: 20rpx;
        vertical-align: text-top;
      }
    }
  }
}

.leftlink {
  transform: rotate(-90deg);
  font-size: 38rpx;
  margin-right: 20rpx;
  color: rgba(36, 36, 36, 1);
}

button::after {
  border: none;
}

.btn {
  background-color: rgba(0, 0, 0, 0);
}
</style>
